<template>
  <el-row class="message-container">
    <el-row>
      <h1 class="message-title">
        {{ $t('trustedComputing.basicInformation.information') }}
      </h1>
    </el-row>
    <el-row class="message-body">
      <el-col :span="12">
        <dl>
          <dt>{{ $t('trustedComputing.basicInformation.firmwareId') }}：</dt>
          <dd>{{ dataFormatter(firmwareId) }}</dd>
          <dt>
            {{ $t('trustedComputing.basicInformation.firmwareVersion') }}：
          </dt>
          <dd>{{ dataFormatter(firmwareVersion) }}</dd>
        </dl>
      </el-col>
      <el-col :span="8">
        <dl>
          <dt>
            {{ $t('trustedComputing.basicInformation.trustedComponentType') }}：
          </dt>
          <dd>{{ dataFormatter(trustedComponentType) }}</dd>
          <dt>{{ $t('trustedComputing.basicInformation.manufacturer') }}：</dt>
          <dd>{{ dataFormatter(manufacturer) }}</dd>
        </dl>
      </el-col>
      <el-col :span="4">
        <b-button v-if="!initStatus" @click="showInitWindow()">
          {{
            $t('trustedComputing.basicInformation.InitTrustedComponentsAccount')
          }}
        </b-button>
        <b-button @click="showUpdateHash()">
          {{ $t('pageFirmware.updateBiosReference') }}
        </b-button>
      </el-col>
    </el-row>
    <!-- Modals -->
    <modal-init-account @ok="initAccount" />
    <modal-update-hash @ok="updateHash" />
  </el-row>
</template>
<script>
import { Row, Col } from 'element-ui';
import DataFormatterMixin from '@/components/Mixins/DataFormatterMixin';
import ModalInitAccount from './ModalInitAccount.vue';
import BVToastMixin from '@/components/Mixins/BVToastMixin';
import ModalUpdateHash from '@/views/Settings/Firmware/FirmwareModalUpdateHash';
export default {
  name: 'Message',
  components: {
    [Row.name]: Row,
    [Col.name]: Col,
    ModalInitAccount,
    ModalUpdateHash,
  },
  mixins: [DataFormatterMixin, BVToastMixin],
  computed: {
    tpcmInformation() {
      return this.$store.getters['trustedComputing/information'];
    },
    firmwareId() {
      return this.tpcmInformation?.firmwareId;
    },
    firmwareVersion() {
      return this.tpcmInformation?.firmwareVersion;
    },
    trustedComponentType() {
      return this.tpcmInformation?.trustedComponentType;
    },
    manufacturer() {
      return this.tpcmInformation?.manufacturer;
    },
    initStatus() {
      return this.tpcmInformation?.initStatus;
    },
  },
  async created() {
    this.$store.dispatch('trustedComputing/getTpcmInformation');
  },
  methods: {
    showInitWindow() {
      this.$bvModal.show('modal-init-account');
    },
    initAccount(username, password) {
      this.$$store
        .dispatch('trustedComputing/initAccount', {
          username,
          password,
        })
        .then(() => {
          this.successToast(
            this.$t('pageUserManagement.toast.successCreateUser', { username })
          );
        })
        .catch(() => {
          this.errorToast(
            this.$t('pageUserManagement.toast.errorCreateUser', { username })
          );
        });
      location.reload();
    },
    showUpdateHash() {
      this.$bvModal.show('modal-update-hash');
    },
    updateHash(username, password) {
      this.$$store
        .dispatch('trustedComputing/updateBiosHash', {
          username,
          password,
        })
        .then(() => {
          this.successToast(
            this.$t('trustedComputing.toast.updateReferenceSuccess')
          );
        })
        .catch(() => {
          this.errorToast(
            this.$t('trustedComputing.toast.updateReferenceError')
          );
        });
    },
  },
};
</script>
<style scoped>
.message-container {
  border-radius: 5px;
  background-color: #fff;
  .el-row {
    padding: 20px 30px 20px;
  }
}
.message-title {
  font-size: 22px;
}
dl > dt {
  font-size: 16px;
  padding-bottom: 20px;
}
dl {
  display: grid;
  grid-template-columns: auto 1fr;
  row-gap: 10px;
  column-gap: 10px;
}
</style>
